<template>
    <div class="page-grid">
        <div>
            <c-trend></c-trend>
            <c-history></c-history>
            <c-hot-point></c-hot-point>
        </div>
        <div>
            <c-words></c-words>
            <c-geo></c-geo>
        </div>
        <div>
            <c-news></c-news>
            <c-words-trend></c-words-trend>
        </div>
        <Drawer class="s-drawer"  :closable="true" :mask="false" :width="504" v-model="drawer" @on-visible-change="isvisible">
            <div slot="close" class="drawer-close">
                <Icon type="md-close" />
                <span>关闭信息</span>
            </div>
            <c-sfrom></c-sfrom>
            <c-comwords></c-comwords>
        </Drawer>
    </div>
</template>
<script>
import delegate from '../js/event.js';
import CNews from '../chart/Chart_t_news.vue';  // 技术新闻
import CWords from '../chart/Chart_t_words.vue'; // 热词图谱
import CTrend from '../chart/Chart_t_tdtrend.vue'; // 
import CHistory from '../chart/Chart_t_tdhistory.vue';
import CHotPoint from '../chart/Chart_t_tdhotpoint.vue';
import CMap from '../chart/Chart_t_map.vue';
import CGeo from '../chart/Chart_t_geo.vue';
import CWordsTrend from '../chart/Chart_t_wordstrend.vue';
import CSfrom from '../chart/Chart_t_drsourefrom.vue'; // 动态信息来源
import CComwords from '../chart/Chart_t_comwrods.vue'; // 共词分析
import { setTimeout } from 'timers';
import mixin from '../js/mixin.js';

export default {
    mixins:[mixin],
    data() {
        return {
           drawer: false,
        }
    },
    created() {
        
    },
   
    mounted () {
        delegate.$emit('drawer-show');
        delegate.$on('s-drawer',this.showDrawer);
        delegate.$emit('s-resize'); 
    },
    beforeDestroy(){
        delegate.$off('s-drawer',this.showDrawer);
    },
    components: {
        CNews,
        CWords,
        CTrend,
        CHistory,
        CHotPoint,
        CMap,
        CGeo,
        CWordsTrend,
        CSfrom,
        CComwords
    },
    methods: {
        isvisible(boll) {
           // 传递显示
           delegate.$emit('draw-open',boll)
        },
        showDrawer(){
           this.drawer = true;     
        }
    },
}
</script>
<style lang="scss">
    .page-grid{
        display: grid;
        grid-template-columns: 26.5%  47%  26.5%;
        padding: 0 20px;
        &> div{
             padding: 0 20px;
        }
        overflow: hidden;
    }
    .s-drawer{
        .ivu-drawer-content{
            background-color: #000;
            padding-top: 60px;
        }
    }
    
    .drawer-close{
        display: flex;
        flex-direction: column;
        font-size: 26px;
        align-items: center;
        color: #98caec;
        span{
            font-size: 12px;
        }
    }
</style>
